<template>
    <div style="height: 100%; position: relative">
        <el-drawer
            title="新增"
            :visible.sync="show_dialog"
            direction="rtl"
            size="80%"
            custom-class="demo-drawer"
            ref="drawer"
        >
            <div class="demo-drawer__content" ref="content">
                <el-form :model="form" :rules="rules" v-if="show_dialog" ref="editDrawer">
                    <el-form-item label="商家名称:" :label-width="formLabelWidth" prop="MerchantName">
                        <el-input v-model="form.MerchantName"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="供应商名称:"
                        :label-width="formLabelWidth"
                        prop="ServiceSuppliersName"
                    >
                        <el-input v-model="form.ServiceSuppliersName"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="服务类型:"
                        :label-width="formLabelWidth"
                        prop="application_services"
                    >
                        <el-select v-model="form.application_services" multiple placeholder="请选择">
                            <el-option
                                v-for="item in Services"
                                :key="item.key"
                                :label="item.des"
                                :value="item.des"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="购买金额:" :label-width="formLabelWidth" prop="PurchaseValue">
                        <el-input v-model="form.PurchaseValue"></el-input>
                    </el-form-item>
                    <el-form-item label="购买数量:" :label-width="formLabelWidth" prop="PurchaseAmount">
                        <el-input v-model="form.PurchaseAmount"></el-input>
                    </el-form-item>
                    <el-form-item label="剩余数量:" :label-width="formLabelWidth" prop="SurplusAmount">
                        <el-input v-model="form.SurplusAmount"></el-input>
                    </el-form-item>
                    <el-form-item label="起止时间:" :label-width="formLabelWidth" prop="time_end_start">
                        <el-date-picker
                            v-model="form.time_end_start"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="预警号码:" :label-width="formLabelWidth" prop="WarningNumber">
                        <el-input v-model="form.WarningNumber"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="收费模式:"
                        :label-width="formLabelWidth"
                        prop="charge_mode_mark"
                    >
                        <el-select v-model="form.charge_mode_mark" placeholder="请选择">
                            <el-option key="precharge_mode" label="预充模式" value="precharge_mode"></el-option>
                            <el-option
                                key="effect_charge_mode"
                                label="按效果收费模式"
                                value="effect_charge_mode"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="扣减模式:"
                        :label-width="formLabelWidth"
                        prop="balance_deduction_mode"
                    >
                        <el-select v-model="form.balance_deduction_mode" placeholder="请选择">
                            <el-option key="shared_mode" label="共享模式" value="shared_mode"></el-option>
                            <el-option
                                key="sub_account_independent_deduction_mode"
                                label="子账户独立扣减"
                                value="sub_account_independent_deduction_mode"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注:" :label-width="formLabelWidth" prop="note">
                        <el-input v-model="form.note"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="短信模板-店铺简称:"
                        :label-width="formLabelWidth"
                        prop="store_abbr"
                    >
                        <el-input v-model="form.store_abbr"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="短信模板-店铺地址:"
                        :label-width="formLabelWidth"
                        prop="store_address"
                    >
                        <el-input v-model="form.store_address"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="短信模板-活动咨询热线:"
                        :label-width="formLabelWidth"
                        prop="gift_tel"
                    >
                        <el-input v-model="form.gift_tel"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="线索类销售联系电话:"
                        :label-width="formLabelWidth"
                        prop="leads_call_out_tel"
                    >
                        <el-input v-model="form.leads_call_out_tel"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="回访类售后联系电话:"
                        :label-width="formLabelWidth"
                        prop="return_cal_out_tel"
                    >
                        <el-input v-model="form.return_cal_out_tel"></el-input>
                    </el-form-item>
                    <el-form-item label="状态:" :label-width="formLabelWidth" prop="ContractStatus">
                        <el-switch
                            v-if="form.ContractStatus==='Executing'"
                            disabled
                            v-model="form.ContractStatus"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="Executing"
                            inactive-value="Close"
                            active-text="执行中"
                            inactive-text="关闭"
                        ></el-switch>
                        <el-switch
                            v-else
                            v-model="form.ContractStatus"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="Open"
                            inactive-value="Close"
                            active-text="开启"
                            inactive-text="关闭"
                        ></el-switch>
                    </el-form-item>
                </el-form>
            </div>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button
                    type="primary"
                    @click="handleClose"
                    :loading="loading"
                    v-show="type!=='show'"
                >{{ loading ? "提交中 ..." : "确 定" }}</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { dateFormatter } from "@/common/js/util"
export default {
    props: ['dialog'],
    data() {
        var checkTime = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请选择起止时间'));
            }
            setTimeout(() => {
                callback();
            }, 1000);
        };
        return {
            loading: false,
            formLabelWidth: '180px',
            show_dialog: false,//弹窗显示
            form: {
                MerchantName: "",
                ServiceSuppliersName: "",
                application_services: "",
                PurchaseValue: "",
                PurchaseAmount: "",
                SurplusAmount: "",
                time_end_start: "",
                WarningNumber: "",
                charge_mode_mark: "",
                balance_deduction_mode: "",
                note: "",
                store_abbr: "",
                store_address: "",
                gift_tel: "",
                leads_call_out_tel: "",
                return_cal_out_tel: "",
                ContractStatus: false,
                application_services_key: ''
            },
            rules: {
                MerchantName: [
                    { required: true, message: '商家名称不能为空' }
                ],
                ServiceSuppliersName: [
                    { required: true, message: '供应商名称不能为空' }
                ],
                application_services: [
                    { required: true, message: '服务类型不能为空', trigger: 'blur' }
                ],
                PurchaseValue: [
                    { required: true, message: '购买金额不能为空' }
                ],
                PurchaseAmount: [
                    { required: true, message: '购买数量不能为空' }
                ],
                SurplusAmount: [
                    { required: true, message: '剩余数量不能为空' }
                ],
                time_end_start: [
                    { required: true, validator: checkTime, }
                ],
                WarningNumber: [
                    { required: true, message: '预警号码不能为空' }
                ],
                charge_mode_mark: [
                    { required: true, message: '收费模式不能为空' }
                ],
                balance_deduction_mode: [
                    { required: true, message: '扣减模式不能为空' }
                ],
                store_abbr: [
                    { required: true, message: '短信模板-店铺简称不能为空' }
                ],
                store_address: [
                    { required: true, message: '短信模板-店铺地址不能为空' }
                ],
                gift_tel: [
                    { required: true, message: '短信模板-活动咨询热线不能为空' }
                ],
                ContractStatus: [
                    { required: true }
                ]
            },
            type: '',
            row: '',
            Services: '',//服务类型
        }
    },
    created() {
        this.default_data();
    },
    methods: {
        default_data() {
            //服务类型
            this.getServices();
        },
        getServices() {
            this.$http.post('/admin/dataService/index.php?act=merchantSet&op=getServices').then(res => {
                if (res.code == 1) {
                    this.Services = res.data;
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(err => {
                this.$message.error(err)
            })
        },
        show_dialog_fn(type, row) {
            this.type = type;
            this.show_dialog = true;
            if (type === 'add') {
                this.form = {
                    MerchantName: "",
                    ServiceSuppliersName: "",
                    application_services: "",
                    PurchaseValue: "",
                    PurchaseAmount: "",
                    SurplusAmount: "",
                    time_end_start: "",
                    WarningNumber: "",
                    charge_mode_mark: "",
                    balance_deduction_mode: "",
                    note: "",
                    store_abbr: "",
                    store_address: "",
                    gift_tel: "",
                    leads_call_out_tel: "",
                    return_cal_out_tel: "",
                    ContractStatus: false,
                    application_services_key: ''
                };
            } else if (type === 'edit') {
                this.row = row;
                this.getItemDetail(row.ID)
            }
        },
        cancelForm() {
            this.loading = false
            this.show_dialog = false
            clearTimeout(this.timer)
        },
        handleClose() {
            let { MerchantName,
                ServiceSuppliersName,
                application_services,
                PurchaseValue,
                PurchaseAmount,
                SurplusAmount,
                time_end_start,
                WarningNumber,
                charge_mode_mark,
                balance_deduction_mode,
                note,
                store_abbr,
                store_address,
                gift_tel,
                leads_call_out_tel,
                return_cal_out_tel,
                ContractStatus } = this.form;
            let application_services_key = application_services;
            if (application_services_key) {
                application_services_key = application_services_key.map((item, index) => {
                    if (this.Services) {
                        let obj = this.Services.find(one => {
                            return one.des === item
                        })
                        return obj.key;
                    } else {
                        return ''
                    }
                })
            } else {
                application_services_key = '';
            }
            let data = {
                MerchantName,
                ServiceSuppliersName,
                application_services: application_services.toString(),
                PurchaseValue,
                PurchaseAmount,
                SurplusAmount,
                ServiceAvailableTime: time_end_start[0],
                ServiceEndTime: time_end_start[1],
                WarningNumber,
                charge_mode_mark,
                balance_deduction_mode,
                note,
                store_abbr,
                store_address,
                gift_tel,
                leads_call_out_tel,
                return_cal_out_tel,
                ContractStatus,
                application_services_key: application_services_key && application_services_key.toString()
            }
            this.$refs.editDrawer.validate(valid => {
                if (valid) {
                    if (this.type === 'edit') {
                        data.id = this.row.ID;
                        this.editItemDetail(data);
                    } else if (this.type === 'add') {
                        this.addItemDetail(data);
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })

        },
        getItemDetail(id) {
            this.$http.post(`/admin/dataService/index.php?act=merchantSet&op=getContract`, { id }).then(res => {
                if (res.code != 1) {
                    this.$message.warning(res.msg);
                    this.show_dialog = false;
                    return;
                }
                //处理服类型
                if (res.data.ServiceDescription) {
                    res.data.application_services = res.data.ServiceDescription.split(',');
                }

                //处理时间
                let time1 = res.data.ServiceAvailableTime;
                let time2 = res.data.ServiceEndTime;
                if (time1) {
                    time1 = dateFormatter('YYYY-MM-DD', time1 * 1000)
                }
                if (time2) {
                    time2 = dateFormatter('YYYY-MM-DD', time2 * 1000)
                }
                res.data.time_end_start = [time1, time2]
                this.form = res.data;
            }).catch(err => {
                this._message('error', err);
            })
        },
        addItemDetail(data) {
            this.$http.post(`/admin/dataService/index.php?act=merchantSet&op=addContract`, data).then(res => {
                if (res && res.code == 1) {
                    this.show_dialog = false;
                    this.$parent.getListData();
                    this.$message.success(res.msg);

                } else {
                    this.$message.warning(res.msg)
                }
            }).catch(err => {
                this._message('error', err);
            })
        },
        editItemDetail(data) {
            this.$http.post(`/admin/dataService/index.php?act=merchantSet&op=updateContract`, data).then(res => {
                if (res.code == 1) {
                    this.show_dialog = false;
                    this.$message.success(res.msg);
                    this.$parent.getListData()
                } else {
                    this.$message.warning(res.msg)
                }
            }).catch(err => {
                this._message('error', err);
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.el-form {
    // width: 560px;
    padding-left: 10px;
}

.el-select /deep/.el-input {
    width: 360px;
}
.plantTable /deep/.el-input {
    width: auto;
}
form /deep/.el-input {
    width: 360px;
}

.demo-drawer__content {
    position: absolute;
    top: 0;
    bottom: 60px;
    width: 100%;
    overflow-y: auto;
}

/deep/.el-drawer__body {
    position: absolute;
    top: 77px;
    bottom: 0;
    width: 100%;
    overflow: auto;
    padding-bottom: 60px;
}

.demo-drawer__footer {
    position: absolute;
    bottom: 10px;
    left: 20px;
}

.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader /deep/.el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.row_line {
    border-bottom: 1px dashed #d7d8dc;
}
.goodsInfo {
    display: flex;
    align-items: center;
}
</style>
